<template>
	<view>

		<web-view  :src="url"></web-view>
		<view v-if="false">
			<view class="content" @touchstart="hideDrawer">
				<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop"
				 :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50">
					<view class="row" v-for="(item,index) in msgList" :key="index" :id="item.ID">
						<!-- 消息 -->
						<block>
							<!-- 自己发出的消息 -->
							<view class="my" v-if="item.to_type == 1">
								<view class="left">
									<view v-if="item.type ==1 " class="bubble">

										<rich-text :nodes="nodesFliter(item.content)"></rich-text>
									</view>
									<view v-else-if="item.type==0" class="bubble show-img-box">
										<image :src="item.content" mode="widthFix" class="show-img" :lazy-load='true'></image>
									</view>
								</view>
								<!-- 自己头像 -->
								<view class="right">
									<image :src="userLogo || '/static/missing-face.png'"></image>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other" v-else>
								<view class="left">
									<image :src="merchantLogo"></image>
								</view>
								<view class="right">
									<view class="username">
										<view class="name">{{merchantName }}</view>
										<view class="time">{{item.time}}</view>
									</view>
									<view v-if="item.type ==1" class="bubble">
										<rich-text :nodes="nodesFliter(item.content)"></rich-text>
									</view>
									<view v-else-if="item.to_type==0" class="bubble show-img-box">
										<image :src="item.content" mode="widthFix" class="show-img" :lazy-load='true'></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<!-- 抽屉栏 -->
			<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
				<!-- 表情 -->
				 <swiper class="emoji-swiper" v-if="!hideEmoji" indicator-dots="true" duration="150">
					<swiper-item v-for="(page,pid) in emojiList" :key="pid">
						<view v-for="(item,index) in page" :key="index" @tap="addEmoji(item)">
							<image mode="widthFix" :src="'/static/emoji/'+item.url+'.png'"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 更多功能 相册-拍照-->
				<view class="more-layer" :class="{hidden:hideMore}">
					<view class="list">
						<view class="box" @tap="chooseImage">
							<view class="icon tupian2"></view>
						</view>
						<view class="box" @tap="camera">
							<view class="icon paizhao"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部输入栏 -->
			<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
				<view class="more" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<view class="textbox">
					<view class="text-mode" :class="isVoice?'hidden':''">
						<view class="box">
							<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" > </textarea>
							</view>
						<view class="em" @tap="chooseEmoji">
							<view class="icon biaoqing"></view>
						</view>
					</view>
				</view>

				<view class="send"  @tap="sentMsgs(1,'')">
					<view class="btn">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { merchatMessages,messageSend } from "@/api/message";
	import { uploadImage } from '@/api/userInfo';
	import {mapState} from "vuex";
	import emojiList from '../../utils/emoji.js'
	export default {
		data() {
			return {
				//TIM变量
				token:null,
				msgList:[],
				// 用户信息
				userName:'',
				userLogo:'',
				//商家信息
				merchantName:'',
				merchantLogo:'',
				//查询数据的开始时间和结束时间
				startTime:0,
				endTime:0,

				//文字消息
				textMsg:'',
				//消息列表
				isHistoryLoading:false,
				scrollAnimation:false,
				scrollTop:0,
				scrollToView:'',

				msgImgList:[],
				myuid:0,

				isVoice:false,

				// 抽屉参数
				hideEmoji: false,
				popupLayerClass:'',
				// more参数
				hideMore:true,
				//表情定义
				emojiList:emojiList.emojiList,

				customerService:{}
			};
		},
		onLoad(option) {
			this.paramId = option.id;
			
			// 新客服
			console.log(option)
			this.userid = uni.getStorageSync('userInfo').id;
			this.url = 'http://h5.dongfangqianmen.com/customerService/index.html?from_id='+this.userid+'&group_id='+this.userid+'-'+this.paramId+'&type=custom'
			console.log(this.url)
			
			return;
			this.token = uni.getStorageSync('accessToken') || undefined;
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login?callbackUrl='+location.href,
				})
			}
			this.endTime = Date.parse(new Date())/1000;
			this.startTime = this.endTime  - 7* 24*60*60
			this.polling(true);
			let that = this;
			setInterval(function(){
				that.endTime = Date.parse(new Date())/1000;
				that.startTime = that.endTime  - 2
				that.polling(false);
			},2000)
			
		},

		methods:{
			async polling(isInit){
				this.$post(`${merchatMessages}`, {type:'custom',userId:  uni.getStorageSync('userInfo').id,merchantId:this.paramId,startTime:this.startTime,endTime:this.endTime }).then(r => {
					if (r.code == 200){
						if (isInit){
							this.msgList = r.data.data;
							this.userName = r.data.user.realname;
							this.userLogo = r.data.user.head_portrait;
							this.merchantName = r.data.merchant.title;
							this.merchantLogo = r.data.merchant.logo;
							this.$nextTick(function() {
								//进入页面滚动到底部
								
								this.scrollTop = 10000;
							});

						}else{
							console.log(r.data.data)
							console.log(this.msgList)
							if (r.data.data.length !== 0 && r.data.data[r.data.data.length-1].updated_at != this.msgList[this.msgList.length-1].updated_at){
								this.msgList = this.msgList.concat(r.data.data);
								console.log(this.msgList);
								this.$nextTick(function() {
									//进入页面滚动到底部
									this.scrollTop += 200;
								});
							}
						}
					}
				});
				this.startTime = this.endTime;
				this.endTime = Date.parse(new Date())/1000;
			},

			nodesFliter(str){
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">'+this.replaceEmoji(str)+'</div>'
				return nodeStr
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){

			},

			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content){
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
				if(content.w>maxW||content.h>maxH){
					let scale = content.w/content.h;
					content.w = scale>1?maxW:maxH*scale;
					content.h = scale>1?maxW/scale:maxH;
				}
				return content;
			},
			//更多功能(点击+弹出)
			showMore(){
				this.isVoice = false;
				this.hideEmoji = true;
				if(this.hideMore){
					this.hideMore = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer(){
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer(){
				this.popupLayerClass = '';
				setTimeout(()=>{
					this.hideMore = true;
					this.hideEmoji = true;
				},150);
			},
			// 选择图片发送
			chooseImage(){
				this.getImage('album');
			},
			//拍照发送
			camera(){
				this.getImage('camera');
			},

			//选照片 or 拍照
			getImage(type){
				this.hideDrawer();
				uni.chooseImage({
					sourceType:[type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
						this.handleUploadFile(res.tempFilePaths);
					}
				});
			},
			handleUploadFile (data) {
				const _this = this;
				let filePath = data.path || data[0];
				console.log(filePath)
				uni.uploadFile({
					url : uploadImage,
					filePath,
					name: 'file',
					header: {
						"x-api-key": _this.token,
						"merchant-id": 1
					},
					formData: {
						'access-token': _this.token,
						"merchant-id": 1
					},
					success (r) {
						uni.hideLoading();
						const data = JSON.parse(r.data);
						console.log(data);
						if (data.code === 200) {
							_this.sentMsgs(0,data.data.url)
						} else {
							uni.showToast({
								icon: 'none',
							    title: '图片发送失败',
							    duration: 2000
							});
						}
					}
				 });
			},
			// 选择表情
			chooseEmoji(){
				this.hideMore = true;
				if(this.hideEmoji){
					this.hideEmoji = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em){
				this.textMsg+=em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(){
				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
					this.hideDrawer();
				}
			},
			// 发送消息
			sentMsgs(type , data){
				if (type==1 && data =="" && this.textMsg != ""){
					data = this.textMsg;
				}
				this.endTime = Date.parse(new Date())/1000+100;
				this.$post(`${messageSend}`, {
					from_id: uni.getStorageSync('userInfo').id,
					to_id:this.paramId,
					type:type,
					content:data,
					time:Date.parse(new Date())/1000
				}).then(r => {
					if (r.code == 200) {
						this.textMsg = ''
						let that = this;
						this.hideDrawer();
						that.polling(false);
					}
				});
			},
			//替换表情符号为图片
			replaceEmoji(str){
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
					for(let i=0;i<this.emojiList.length;i++){
						let row = this.emojiList[i];
						for(let j=0;j<row.length;j++){
							let EM = row[j];
							if(EM.alt==item){
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let imgstr = '<img style="vertical-align: middle;" src="../../static/emoji/'+EM.url+'.png">';
								return imgstr;
							}
						}
					}
				});
				return replacedStr;
			},

			// 添加文字消息到列表
			addTextMsg(msg){
				this.msgList.push(msg);
			},

			// 添加图片消息到列表
			addImgMsg(msg){
				msg.msg.content = this.setPicSize(msg.msg.content);
				this.msgImgList.push(msg.msg.content.url);
				this.msgList.push(msg);
			},
			addRedEnvelopeMsg(msg){
				this.msgList.push(msg);
			},

		}
	}
</script>
<style lang="scss">
	page{
		background-color: #e5e5e5;
	}
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
		.icon {
			font-family:"HMfont-home" !important;
			font-size:56upx;
			font-style:normal;
			color: #333;
			&.biaoqing:before {
			  content: "\e797";
			}
			&.jianpan:before {
			  content: "\e7b2";
			}
			&.yuyin:before {
			  content: "\e805";
			}
			&.tupian:before {
			  content: "\e639";
			}
			&.chehui:before {
			  content: "\e904";
			}
			&.luyin:before {
			  content: "\e905";
			}
			&.luyin2:before {
			  content: "\e677";
			}
			&.other-voice:before {
			  content: "\e667";
			}
			&.my-voice:before {
			  content: "\e906";
			}
			&.hongbao:before {
			  content: "\e626";
			}
			&.tupian2:before {
			  content: "\e674";
			}
			&.paizhao:before {
			  content: "\e63e";
			}
			&.add:before {
			  content: "\e655";
			}
			&.close:before {
			  content: "\e607";
			}
			&.to:before {
			  content: "\e675";
			}
		}
	.hidden{
		display: none !important;
	}
	.popup-layer{
		&.showLayer{transform: translate3d(0,-42vw,0);}
		transition: all .15s linear;
		width: 100%;
		height: 42vw;
		padding: 20upx 2%;
		background-color: #f3f3f3;
		border-top: solid 1upx #ddd;
		position: fixed;
		z-index: 20;
		top: 100%;
		.emoji-swiper{
			height: 40vw;
			swiper-item{
				display: flex;
				align-content: flex-start;
				flex-wrap: wrap;
				view{
					width: 12vw;
					height: 12vw;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.more-layer{
			width: 100%;
			height: 42vw;
			.list{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.box{
					width: 18vw;
					height: 18vw;
					border-radius: 20upx;
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 3vw 2vw 3vw;
					.icon{
						font-size: 70upx;
					}
				}
			}
		}
	}
	.input-box{
		width: 100%;
		min-height: 100upx;
		padding: 0 1%;
		background-color: #f2f2f2;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom:-2upx;
		&.showLayer{transform: translate3d(0,-42vw,0);}
		transition: all .15s linear;
		border-bottom: solid 1upx #ddd;
		.voice,.more{
			flex-shrink: 0;
			width: 90upx;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.send{
			margin-left: 20upx;
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			display: flex;
			align-items: center;
			.btn{
				width: 90upx;
				height: 56upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background:linear-gradient(to right,#f09b37,#eb632c);
				color: #fff;
				border-radius: 6upx;
				font-size: 24upx;
			}
		}
		.textbox{
			width: 100%;
			min-height: 70upx;
			margin-top: 15upx;
			.voice-mode{
				width: calc(100% - 2upx);
				height: 68upx;
				border-radius: 70upx;
				border:solid 1upx #cdcdcd;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				background-color: #fff;
				color: #555;
			}
			.text-mode{
				width: 100%;
				min-height: 70upx;
				display: flex;
				background-color: #fff;
				border-radius: 40upx;
				.box{
					width: 100%;
					padding-left: 30upx;
					min-height: 70upx;
					display: flex;
					align-items: center;
					textarea{
						width: 100%;
					}
				}
				.em{
					flex-shrink: 0;
					width: 80upx;
					padding-left: 10upx;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.record{
		width: 40vw;
		height: 40vw;
		position: fixed;
		top: 55%;
		left: 30%;
		background-color: rgba(0,0,0,.6);
		border-radius: 20upx;
		.ing{
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;
			// 模拟录音音效动画
			@keyframes volatility {
				0% {background-position: 0% 130%;}
				20% {background-position: 0% 150%;}
				30% {background-position: 0% 155%;}
				40% {background-position: 0% 150%;}
				50% {background-position: 0% 145%;}
				70% {background-position: 0% 150%;}
				80% {background-position: 0% 155%;}
				90% {background-position: 0% 140%;}
				100% {background-position: 0% 135%;}
			}
			.icon{
				background-image:linear-gradient(to bottom,#f09b37,#fff 50%);
				background-size:100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip:text;
				-webkit-text-fill-color:transparent;
				font-size: 150upx;
				color: #f09b37;
			}
		}
		.cancel{
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				color: #fff;
				font-size: 150upx;
			}
		}
		.tis{
			width: 100%;
			height: 10vw;
			display: flex;
			justify-content: center;
			font-size: 28upx;
			color: #fff;
			&.change{
				color: #f09b37;
			}
		}
	}
	.content{
		width: 100%;
		.msg-list{
			width: 96%;
			padding: 0 2%;
			position: absolute;
			top: 0;
			bottom: 100upx;
			.loading{
				//loading动画
				display: flex;
				justify-content: center;
				@keyframes stretchdelay {
					0%, 40%, 100% {
						transform: scaleY(0.6);
					}
					20% {
						transform: scaleY(1.0);
					}
				}
				.spinner {
					margin: 20upx 0;
					width: 60upx;
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					view {
						background-color: #f06c7a;
						height: 50upx;
						width: 6upx;
						border-radius: 6upx;
						animation: stretchdelay 1.2s infinite ease-in-out;
					}
					.rect2 {
					  animation-delay: -1.1s;
					}
					.rect3 {
					  animation-delay: -1.0s;
					}
					.rect4 {
					  animation-delay: -0.9s;
					}
					.rect5 {
					  animation-delay: -0.8s;
					}
				}
			}
			.row{
				.system{
					display: flex;
					justify-content: center;
					view{
						padding: 0 30upx;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c9c9c9;
						color: #fff;
						font-size: 24upx;
						border-radius: 40upx;
					}
					.red-envelope{
						image{
							margin-right: 5upx;
							width: 30upx;
							height: 30upx;
						}
					}
				}
				&:first-child{
					margin-top: 20upx;
				}
				padding: 20upx 0;
				.my .left,.other .right{
					width: 100%;
					display: flex;
					.bubble{
						max-width: 70%;
						min-height: 50upx;
						border-radius: 10upx;
						padding: 15upx 20upx;
						display: flex;
						align-items: center;
						font-size: 32upx;
						word-break: break-word;
						&.img{
							background-color: transparent;
							padding:0;
							overflow: hidden;
							image{
								max-width: 350upx;
								max-height: 350upx;
							}
						}
						&.red-envelope{
							background-color: transparent;
							padding:0;
							overflow: hidden;
							position: relative;
							justify-content: center;
							align-items: flex-start;
							image{
								width: 250upx;
								height: 313upx;
							}
							.tis{
								position: absolute;
								top: 6%;
								font-size: 26upx;
								color: #9c1712;
							}
							.blessing{
								position: absolute;
								bottom: 14%;
								color: #e9b874;
								width: 80%;
								text-align: center;
								overflow: hidden;
								// 最多两行
								display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
							}
						}
						&.voice{
							.icon{
								font-size: 40upx;
								display: flex;
								align-items: center;
							}
							.icon:after
							{
								content:" ";
								width: 53upx;
								height: 53upx;
								border-radius: 100%;
								position: absolute;
								box-sizing: border-box;
							}
							.length{
								font-size: 28upx;
							}
						}
					}
				}
				.my .right,.other .left{
					flex-shrink: 0;
					width: 80upx;
					height: 80upx;
					image{
						width: 80upx;
						height: 80upx;
						border-radius: 10upx;
					}
				}
				.my{
					width: 100%;
					display: flex;
					justify-content: flex-end;
					.left{
						min-height: 80upx;

						align-items: center;
						justify-content: flex-end;
						.bubble{
							background-color: #f06c7a;
							color: #fff;

							&.voice{
								.icon{
									color: #fff;
								}
								.length{
									margin-right: 20upx;
								}
							}
							&.play{
								@keyframes my-play {
									0% {
										transform: translateX(80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon:after
								{
									border-left: solid 10upx rgba(240,108,122,.5);
									animation: my-play 1s linear infinite;
								}
							}
						}
					}
					.right{
						margin-left: 15upx;
					}
				}
				.other{
					width: 100%;
					display: flex;
					.left{
						margin-right: 15upx;
					}
					.right{
						flex-wrap: wrap;
						.username{
							width: 100%;
							height: 45upx;
							font-size: 24upx;
							color: #999;
							display: flex;
							.name{
								margin-right: 50upx;
							}
						}
						.bubble{
							background-color: #fff;
							color: #333;
							&.voice{
								.icon{
									color: #333;

								}
								.length{
									margin-left: 20upx;
								}
							}
							&.play{
								@keyframes other-play {
									0% {
										transform: translateX(-80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon:after
								{
									border-right: solid 10upx rgba(255,255,255,.8);

									animation: other-play 1s linear infinite;
								}
							}
						}
					}
				}
			}
		}
	}
	.windows{

		.mask{
			position: fixed;
			top: 100%;
			width: 100%;
			height: 100%;
			z-index: 1000;
			background-color: rgba(0,0,0,.6);
			opacity: 0;
			transition: opacity .2s ease-out;
		}
		.layer{
			position: fixed;
			width: 80%;
			height: 70%;
			left: 10%;
			z-index: 1001;
			border-radius: 20upx;
			overflow: hidden;
			top:100%;
			transform: scale3d(.5,.5,1);
			transition: all .2s ease-out;
		}
		&.show{
			display: block;
			.mask{
				top: 0;
				opacity: 1;
			}
			.layer{
				transform: translate3d(0,-85vh,0) scale3d(1,1,1);
			}
		}
		&.hide{
			display: block;
			.mask{
				top: 0;
				opacity: 0;
			}
			.layer{
				//transform: translate3d(0,-85vh,0) scale3d(.5,.5,1);
			}
		}
	}
	.open-redenvelope{
		width: 100%;
		height: 70vh;
		background-color: #cf3c35;
		position: relative;
		.top{
			width: 100%;
			background-color: #fe5454;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			border-radius: 0 0 100% 100%;
			box-shadow: inset 0 -20upx 0 #9c1712;
			.close-btn{
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: flex-end;
				margin-bottom: 30upx;
				.icon{
					color: #9c1712;
					margin-top: 10upx;
					margin-right: 10upx;
				}
			}
			image{
				width: 130upx;
				height: 130upx;
				border: solid 12upx #cf3c35;
				border-radius: 100%;

				margin-bottom: -65upx;
			}
			margin-bottom: 65upx;
		}
		.from,.blessing,.money,.showDetails{
			width: 90%;
			padding: 5upx 5%;
			display: flex;
			justify-content: center;
			font-size: 32upx;
			color: #fff;
		}
		.money{
			font-size: 100upx;
			color: #f8d757;
			display: flex;
			padding-top: 20upx;
		}
		.showDetails{
			position: absolute;
			bottom: 20upx;
			align-items: center;
			font-size: 28upx;
			color: #f8d757;
			.icon{
				font-size: 26upx;
				color: #f8d757;
			}
		}
	}
	.show-img{
		border-radius: 16upx;
		height: 0;
	}
	.show-img-box{
		padding: 0!important;
		width: 50%;
		background-color: #FFFFFF!important;
		min-height: 0!important;
	}
</style>
